<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>订单修改</title>
    <base>
    <link rel="stylesheet" type="text/css"
          href="../../../res/layui/css/layui.css" media="all">
    <style type="text/css">
        body {
            margin: 20px 0px;
        }

        #one {
            position: absolute;
            right: 9%;
            top: 67px;
        }

        .demoTable {
            margin: 0px 0px 0px 25px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title"
          style="margin-top: 20px;">
    <legend>修改订单</legend>
</fieldset>
<script src="../../../res/layui/layui.js" charset="utf-8"></script>
<script src="../../../res/js/jquery-3.4.1.min.js"></script>
<script src="../../../res/js/util.js"></script>
<form class="layui-form" id="myform">
    <div class="layui-form-item">
        <input type="hidden" name="purchaseId" id="purchaseId">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px;">采购备注</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" id="remark" placeholder="采购备注" maxlength="200"
                       autocomplete="off" class="layui-input">
            </div>
            经销商　
            <div class="layui-inline layui-form">
                <select name="supName" id="supName"
                        autocomplete="off" lay-filter='supName' class="layui-input">
                    <option></option>
                </select>
            </div>
        </div>
        <div class="layui-input-block" id="one">
            <input type="button" id="add" class="layui-btn" lay-event="baoc" value="立即修改">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table class="layui-hide" id="goods" lay-filter="demo"></table>
<br/>
<div class="demoTable">
    搜索：
    <div class="layui-inline">
        <input class="layui-input" name="materialName" id="materialName" autocomplete="off" placeholder="输入原材料关键字">
    </div>
    原材料类型：
    <div class="layui-inline layui-form">
        <select name="typeName" id="typeName" autocomplete="off" lay-filter='typeName' class="layui-input">
            <option></option>
        </select>
    </div>
    <div class="layui-input-inline" style="width: 100px;">
        <input type="number" id="priceMin" name="priceMin" onkeyup="priceMin()" placeholder="￥" autocomplete="off"
               class="layui-input">
    </div>
    -
    <div class="layui-input-inline" style="width: 100px;">
        <input type="number" id="priceMax" name="priceMax" onkeyup="priceMax()" placeholder="￥" autocomplete="off"
               class="layui-input">
    </div>
    <button class="layui-btn" id="sousuo" data-type="reload">搜索</button>
</div>
<table class="layui-table" id='cx' lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="barsDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加</a>
</script>
<script>
    var arr = new Array();
    var array = new Array();
    layui.use(['form', 'laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function () {
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
        layer = layui.layer //弹层
            , table = layui.table //表格
            , form = layui.form
            , upload = layui.upload //上传
            , element = layui.element; //元素操作

        //监听Tab切换
        element.on('tab(demo)', function (data) {
            layer.msg('切换了：' + this.innerHTML);
            console.log(data);
        });
        let tableData = [];
        var value = [];
        var $ = layui.$;
        /**
         * 经销商
         */

        $.ajax({
            url: getRootPath() + 'hqPurchaseorder/showSupName',
            data: null,
            dataType: 'json',
            async: false,//同步
            type: 'post',
            success: function (obj) {
                $.each(obj, function (index, item) {
                    $("#supName").append("<option value=" + item.supId + ">" + item.supName + "</option>");
                })
                //渲染
                form.render('select');
            },
            error: function () {

            }
        })
        /**
         * 采购明细 材料列表
         */
        $.ajax({
            async: false,
            url: getRootPath() + 'hqPurchaseorder/findById',
            data: {purchaseId: getQueryString("purchaseId")},
            dataType: 'json',
            type: 'post',
            success: function (res) {
                tableData = res.data;
                $("#supName").val(res.supId);
                $("#remark").val(res.remark);
                //渲染
                form.render('select');
            }
        })
        //执行一个 table 实例
        table.render({
            elem: '#goods'
            //, url: getRootPath() + 'hqPurchaseorder/findById' //数据接口
            //, page: true //开启分页
            //, method: 'post'
            , limit: 20 //上限20
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: false
            , data: tableData
            , size: 'sm'
            , cols: [[ //表头
                {field: 'materialName', title: '采购药品名称', width: 120, fixed: 'left', align: 'center'}
                , {
                    field: 'count', title: '物品重量(g)', width: 100, edit: 'text', align: 'center', templet: function (d) {
                        var reg = new RegExp("^[0-9]*$");
                        if (!reg.test(d.count)) {
                            return 1;
                        }else if (d.count.length>4){
                            return 1;
                        } else {
                            return d.count;
                        }
                    }
                }
                , {field: 'typeName', title: '药品类型', width: 100, align: 'center', sort: "true"}
                , {field: 'money', title: '价格', width: 120, align: 'center'}
                , {fixed: 'right', title: '操作', width: 140, align: 'center', toolbar: '#barDemo'}
            ]]
            , id: 'testReload'
        });
        var num=0;
        $("#add").on("click", function () {
            num++;
            console.log("data-----" + JSON.stringify(table.cache["testReload"]));
            if (num ===1){
                var remark = $("#remark").val();
                //得到订单表的供应商id
                var supName = $("#supName").val();
                if (remark === "") {
                    layer.msg('请输入采购备注');num=0;
                    playMessage('请输入采购备注');
                } else if (supName === "" || supName === null) {
                    layer.msg('请选择经销商');num=0;
                    playMessage('请选择经销商');
                } else {
                    var data = {
                        list: JSON.stringify(table.cache["testReload"]),
                        remark: $("#remark").val(),
                        supName: $("#supName").val(),
                        purchaseId: getQueryString("purchaseId")
                    };
                    var url = getRootPath() + 'hqPurchaseorder/update';
                    $.post(url, data, function (res) {
                        if (res.status === 20) {
                            parent.closeOpen(res.message);
                        } else {
                            parent.closeOpen(res.message);
                        }
                    }, "json");
                }
            }

        });

        //执行一个 table 实例
        table.render({
            elem: '#cx'
            , url: getRootPath() + 'hqPurchaseorder/rawMaterialShowAll' //原材料显示
            , page: true //开启分页
            , method: 'post'
            , size: 'sm'
            , cols: [[ //表头
                //{type: 'checkbox', fixed: 'left'}
                //{field: 'materialId', title: '药品ID', width: 350, fixed: 'left', align: 'center'}
                 {field: 'materialName', title: '药品名称', width: 150, align: 'center'}
                , {field: 'money', title: '价格', width: 120, align: 'center'}
                , {field: 'typeName', title: '类型名称', width: 120, align: 'center'}
                , {fixed: 'right', title: '操作', width: 140, align: 'center', toolbar: '#barsDemo'}
            ]]
            , id: 'testRe'
            , parseData: function (res) {//res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });

        table.on('tool(test)', function (obj) { //原材料表
            var data = obj.data //获得当前行数据
                , layEvent = obj.event //获得 lay-event 对应的值
                , biao = table.cache["testReload"];
            console.info(data);
            if (layEvent === 'add') {
                var num = 0;
                $.each(biao, function (index, item) {
                    if (item.materialId === obj.data.materialId) {
                        num++;
                    }
                });
                if (num === 0) {
                    var s = {
                        materialId: data.materialId,
                        materialName: data.materialName,
                        count: 1,
                        remark: $("#remark").val(),
                        typeName: data.typeName,
                        money: data.money
                    };
                    biao.push(s);
                } else {
                    layer.msg('亲，你点击的药品已经加入过了!!!', {
                        icon: 5,
                        time: 1500 //1秒关闭（如果不配置，默认是3秒）
                    });
                }
                table.reload("testReload", {
                    data: biao
                });
                console.info(biao);
            }
        });
        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            console.info(data);
            if (layEvent === 'del') {
                obj.del(); //删除对应行（tr）的DOM结构
            }
        });
        //条件查询
        var $ = layui.$;
        /**
         * 材料类型
         */
        $.ajax({
            url: getRootPath() + 'hqPurchaseorder/showTypeName',
            data: null,
            dataType: 'json',
            async: false,//同步
            type: 'post',
            success: function (obj) {
                $.each(obj, function (index, item) {
                    $("#typeName").append("<option value=" + item + ">" + item + "</option>");
                })
                //渲染
                form.render('select');
            },
            error: function () {

            }
        })

        //条件查询
        $('#sousuo').on('click', function () {
            //执行重载
            table.reload('testRe', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    materialName: $('#materialName').val(),
                    typeName: $("#typeName").val(),
                    mixMoney: $('#priceMin').val(),
                    maxMoney: $('#priceMax').val()
                }
            });
        });
        //监听单元格编辑

        table.on('edit(demo)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            var a = table.cache["testReload"];
            if (field === "count") {
                var reg = new RegExp("^[0-9]*$");
                $.each(a, function (index, item) {
                    if (item.count.length>4){
                        item.count = 1;
                        layer.msg('输入的内容长度不能大于4位', {
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            playMessage('输入的内容长度不能大于4位');
                            table.reload("testReload", {data: a});
                        });
                    }else if (!reg.test(item.count)) {
                        item.count = 1;
                        layer.msg('输入的内容不能含有字母或文本', {
                            icon: 1,
                            time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            playMessage('输入的内容不能含有字母或文本');
                            table.reload("testReload", {data: a});
                        });
                    }
                });
            }
        });
    });
</script>
</body>
</html>